<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
</head>
<body>
    <div class="my-eye">
        <div class="eye"></div>
        <div class="eye"></div>
    </div>
    <script>
        document.onmousemove = function(e){
            document.styleSheets[0].addRule(
                `.eye::after`,
                `top:15px ;left:15px;`
            );
            document.querySelectorAll('.eye').forEach(eye => {
                //眼球相关属性
                const boundingClientRect = eye.getBoundingClientRect();
                const x = boundingClientRect.left + eye.offsetWidth / 2;
                const y = boundingClientRect.top + eye.offsetHeight / 2;

                //计算弧度
                const radian = Math.atan2(e.clientX - x,e.clientY - y);

                //计算角度
                const angle = 225 - radian * (180 / Math.PI);

                eye.style.cssText +=`
                    transform:rotate(${angle}deg);
                `;
            });
        }
    </script>
</body>
</html>